<template>
  <div class="body-content">
    <div class="title-block">
      <el-input placeholder="请输入标题" v-model="inputTitle">
        <template slot="prepend" class="title-title">标题</template>
      </el-input>
      <input
        enctype="multipart/form-data"
        id="fileCover"
        class="upload_input_select_cover"
        type="file"
        accept="image/*"
        name="filecover"
        multiple="multiple"
        value="选择封面"
      />
    </div>
    <editor class="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
    <el-button type="primary" @click="onSubmit">完成</el-button>
    <el-button>取消</el-button>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from 'axios'
import { newBlog } from "@/api/table";

import tinymce from "tinymce/tinymce"; // tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue";
// 引入富文本编辑器主题的js和css
// import 'tinymce/skins/content/default/content.css'
import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons"; // 解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/preview";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/help";
export default {
  data() {
    return {
      activeName: "",
      inputTitle: "",
      tinymceHtml: "",
      blogFile: {
        ownerNickname: "",
        ownerAccount: "",
        knowledgeTitle: "",
        fileName: "测试文件",
        filePath: "",
      },
      editorInit: {
        // 为tinymce设置一个主体body的class
        body_class: "tinymce-body",
        language_url: "/tinymce/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        // skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
        convert_urls: false,
        width: "100%",
        height: 700,
        // content_css（为编辑区指定css文件）,加上就不显示字数统计了
        // content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,
        // （指定需加载的插件）
        // plugins: this.plugins,
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs",
        toolbar:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
            styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
            table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
        // （自定义工具栏）
        // toolbar: this.toolbar,
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        statusbar: true, // 底部的状态栏
        menubar: "file edit insert view format table tools help", // （1级菜单）最上方的菜单
        branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        link_list: [
          { title: "预置链接1", value: "http://www.tinymce.com" },
          { title: "预置链接2", value: "http://tinymce.ax-z.cn" },
        ],
        image_list: [
          {
            title: "预置图片1",
            value: "https://www.tiny.cloud/images/glyph-tinymce@2x.png",
          },
          {
            title: "预置图片2",
            value: "https://www.baidu.com/img/bd_logo1.png",
          },
        ],
        image_class_list: [
          { title: "None", value: "" },
          { title: "Some class", value: "class-name" },
        ],
        importcss_append: true,
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
          console.log(failure);
        },
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
      },
    };
  },
  mounted() {
    tinymce.init({});
    console.log(this.nickName, this.token);
  },
  components: {
    editor: Editor,
  },
  computed: {
    ...mapGetters(["nickName", "token"]),
  },
  methods: {
    onSubmit() {
      console.log("Submit!");
      // this.knowledgeFile.ownerNickname = this.nickName;
      // this.knowledgeFile.ownerAccount = this.token;
      // this.knowledgeFile.knowledgeTitle = this.inputTitle;
      // this.knowledgeFile.filePath = this.tinymceHtml;
      // newBlog(
      //   this.nickName,
      //   this.token,
      //   this.inputTitle,
      //   this.tinymceHtml,
      //   bologCover,
      //   uploadTime
      // ).then((response) => {
      //   console.log(response);
      //   if (response.data > 0) {
      //     this.$message("创建成功!");
      //   }
      // })
      this.uploadFile()
    },
    uploadFile(event) {
      //加入标题
      var formData = new FormData();
      formData.append("ownerNickname", this.nickName);
      formData.append("ownerAccount", this.token);
      formData.append("title", this.inputTitle);
      formData.append("contentLimit", this.tinymceHtml);
      console.log(File.name);
      //得到封面图
      var fileM = document.querySelector("#fileCover");
      var fileObj = fileM.files[0];
      fileObj = fileM.files[0];
      formData.append("bologCover", fileObj);
      console.log(fileObj);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      formData.get("ownerNickname")
      console.log(formData.getAll);
      console.log(formData.getAll("ownerNickname"));
      console.log(formData.getAll("ownerAccount"));
      console.log(formData.getAll("title"));
      console.log(formData.getAll("contentLimit"));
      console.log(formData.getAll("bologCover"));
      
      var timetamp3 = Number(new Date())
      formData.append("uploadTime",timetamp3)
      axios
        .post("http://localhost:8041/blog/newBlog", formData, config)
        .then((res) => {
          console.log(config);
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  margin: 0 !important;
}
.element.style {
  width: 0px !important;
}
.el-select .el-input {
  width: 80%;
}
.body-content {
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
}
.title-block {
  margin-top: 10px;
  margin-bottom: 10px;
}
.title-title {
  font-weight: 900;
}
.tinymce {
  width: 80%;
}
.tinymce-body {
  margin-left: 10;
}
</style>